<template>
  <div class="home">
    <!-- 弹框部分 -->
    <van-popup
      round
      v-model:show="show"
      position="bottom"
      click-overlay="close"
    >
      <!-- 第一部分 -->
      <div class="one" v-show="activeIndex == 0">
        <div class="onetou">
          <div
            style="margin-left: 20px; margin-top: 25px; display: flex"
            @click="taxs"
            v-show="zaicitan"
          >
            返回
          </div>
          <div class="title">选择考试</div>
        </div>
        <div
          :class="active == index ? 'act' : 'item'"
          v-for="(item, index) in listArr"
          :key="index"
          @click="chuanzhi({ index: index, id: item.id })"
        >
          <div class="itemt">{{ item.title }}</div>
          <div class="itemb">{{ item.brief }}</div>
        </div>
      </div>
      <!-- 第二部分 -->
      <div class="two" v-show="activeIndex == 1">
        <van-nav-bar title="管理类联考" left-arrow @click-left="onClickLeft" />
        <div
          :class="active1 == index ? 'act' : 'item'"
          v-for="(item, index) in arrList"
          :key="index"
          @click="active1 = index"
        >
          <div @click="activeIndex++" style="padding-top: 10px">
            {{ item }}
          </div>
        </div>
      </div>
      <!-- 第三部分 -->
      <div class="san" v-show="activeIndex == 2">
        <van-nav-bar title="管理类联考" left-arrow @click-left="onClickLeft" />
        <div
          :class="active2 == index ? 'act' : 'item'"
          v-for="(item, index) in kaoshiList"
          :key="index"
          @click="active2 = index"
        >
          <div class="itemt" style="padding-top: 10px">
            {{ item.major_name }}
          </div>
          <div class="wan" v-show="active2 == index" @click="ok">完成</div>
        </div>
      </div>
    </van-popup>
    <!-- 非弹框部分 -->
    <div class="bigbox">
      <!-- 头部 -->
      <div class="tou">
        <div class="l" @click="showXs">
          {{
            store.arrListt.length > 0 ? store.arrListt[0].title : '请选择考试'
          }}>
        </div>
        <div class="r">
          <img
            src="../../public/2.jpg"
            class="img"
            @click="$router.push('/search')"
          />
          <img src="../../public/1.jpg" class="img" />
        </div>
      </div>
      <!-- tabb栏切换 -->
      <div class="tab">
        <div
          :class="tabactive == index ? 'tabact' : 'tabItem'"
          v-for="(item, index) in allListhq"
          :key="index"
          @click="changeQH({ index: index, id: item.id })"
        >
          {{ item.title }}
        </div>
      </div>
      <!-- <van-tabs v-model:active0="active0" @click-tab="onClickTab">
        <van-tab
          :title="item.title"
          v-for="(item, index) in allListhq"
          :key="index"
          @click="changeQH({ index: index, id: id })"
        >
        </van-tab>
      </van-tabs> -->
      <!-- 渲染轮播图数据 -->
      <div class="lunbo">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="(item, index) in lunboList" :key="index">
            <img :src="item.banner_img" class="lunimg" />
          </van-swipe-item>
        </van-swipe>
      </div>
      <!-- 中间内容区 -->
      <div class="nrqu">
        <div
          v-for="(item, index) in allListhq"
          :key="index"
          style="display: flex"
          v-show="id == item.id"
        >
          <div class="nrquItem" v-for="(ite, ind) in item.child" :key="ind">
            {{ ite.title }}
          </div>
        </div>
      </div>
      <!-- 剩余时间 -->
      <div class="timer">
        <img src="../../public/4.jpg" alt="" class="timerimg" />
        <div class="timerzi">距离考研{{ SYTimer.residue_date }}天</div>
      </div>
      <!-- 免费直播课 -->
      <div class="zb" v-show="tabactive == 0">
        <div class="zbt">
          <div class="zbtl">{{ zhoboList.model_name }}</div>
          <div class="zbtr" @click="goxq">查看全部 ></div>
        </div>
        <!-- 老师头像 course_list .slice(0, 3)-->
        <div class="zbTouXiang">
          <div
            class="zbTou"
            v-for="(item, index) in course_list?.slice(0, 3)"
            :key="index"
            @click="goxqing(item.id)"
          >
            <img
              :src="ite.avatar"
              alt=""
              class="zbTouimg"
              v-for="(ite, ind) in item.teacher.slice(0, 1)"
              :key="ind"
            />
            <div class="zbTouTitle">{{ item.title }}</div>
            <div class="zbTouJq">
              {{ item.price == 0 ? '免费' : `￥${item.price / 100}` }}
            </div>
            <div class="zbTouYBM">{{ item.sales_num }}人已报名</div>
          </div>
        </div>
      </div>
      <!-- 精选 {{ jxlist.model_name }}-->
      <div class="jx">
        <div class="jxt">精选</div>
        <!-- 内容区  v-if="jingxuan.length > 0" -->
        <div class="all">
          <div class="list" v-for="(item, index) in jxlist" :key="index">
            <div class="t1">{{ item.course_classify_title }}</div>
            <div class="t2">{{ item.title }}</div>
            <div class="t3">
              <van-tag
                round
                type="default"
                size="medium"
                v-for="(ite, ind) in item.course_label"
                :key="ind"
                style="margin-right: 10px"
                >{{ ite.label_name }}</van-tag
              >
            </div>
            <div class="t4">
              <div
                class="tu"
                v-for="(ite, ind) in item.teacher.slice(0, 3)"
                :key="ind"
              >
                <img :src="ite.avatar" alt="" class="img" />
                <div class="zi" style="margin-top: 10px">
                  {{ ite.teacher_name }}
                </div>
              </div>
            </div>
            <div class="t5">
              <div class="dis">
                <div class="l">{{ item.sales_num }}人已报名</div>
                <div class="r" style="color: green" v-if="item.price == 0">
                  免费
                </div>
                <div class="r" style="color: red" v-else>
                  ￥{{ item.price }}
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 空状态 -->
        <!-- <van-empty description="暂无该数据哦!" v-else /> -->
      </div>
    </div>
  </div>
</template>

<script>
import {
  getListApi,
  getKaoShiApi,
  getShouYeApi,
  getBannerApi,
  getBannerTimerApi,
  getShouYeListApi,
  getShouYeJXApi,
  getShouYeJXuanApi
} from '../http/api.js'
import { toRefs, reactive, onMounted } from 'vue'
import { Toast } from 'vant'
import { useRouter } from 'vue-router'
import { useCounterStore } from '@/stores/counter'
export default {
  setup(props) {
    const store = useCounterStore()
    const router = useRouter()
    const data = reactive({
      show: true,
      listArr: [], //首页的数据
      active: -1, //第一页的高亮
      active1: -1, //第一页的高亮
      active2: -1, //第一页的高亮
      kaoshiList: [], // 尾页的数据
      activeIndex: 0,
      arrList: ['在校生', '在职'],
      id: 0, //首页传递过去的id
      allListhq: [], //获取到的所有数据
      tabactive: 0, //tab栏下标
      name: '', //获取的名称
      active0: 0, //tab栏的索引
      lunboList: [], //轮播图的数据
      SYTimer: [], //剩余时间的数据
      childList: [], //判断是否有课程
      zhoboList: [], //直播的数据
      zaicitan: false, //弹框
      jxlist: [], //精选数据
      jingxuan: [],
      course_list: []
    })
    onMounted(() => {
      getlist()
      chance()
      if (store.arrListt.length > 0) {
        getJXList(store.arrListt[0].id)
        getZHIbOList(store.arrListt[0].id)
        getLunboTuu(store.arrListt[0].id)
      }
    })
    // 渲染首页数据
    const getlist = async () => {
      const res = await getListApi()
      console.log('渲染的数据', res)
      data.listArr = res
    }
    // 返回上一页
    const onClickLeft = () => {
      console.log('返回')
      data.activeIndex--
    }
    // 首页传值
    const chuanzhi = async (obj) => {
      console.log('传递过来的值', obj)
      let { index, id } = obj
      data.active = index
      data.id = id
      data.activeIndex++
      // 渲染尾页数据
      const res1 = await getKaoShiApi(data.id)
      console.log('考试的数据', res1)
      data.kaoshiList = res1
    }

    // 点击完成
    const ok = async () => {
      let arr1 = []
      arr1.push(
        data.listArr[data.active],
        data.arrList[data.active1],
        data.kaoshiList[data.active2]
      )
      console.log('arr1', arr1)
      store.add(arr1)
      // 渲染尾页数据
      const res2 = await getShouYeApi(data.id)
      console.log('所有的数据', res2)
      data.allListhq = [{ title: '精选', id: store.arrListt[0].id }, ...res2]
      console.log('所有的数据', data.allListhq)
      data.show = false
      data.active1 = -1
      data.active2 = -1
      console.log('选择的名称', data.listArr[data.active].title)
      getLunboTuu(data.id)
      getJXList(data.id)
      getZHIbOList(data.id)
    }
    // 判断是否选中值 关闭弹出层
    const close = (e) => {
      console.log('关闭弹出层', e)
      if (data.active == -1 && data.active1 == -1 && data.active2 == -1) {
        data.show = true
        Toast.fail('请选择哦')
      } else {
        data.show = false
      }
    }
    // 判断是否选择过
    const chance = () => {
      if (store.arrListt.length > 0) {
        data.show = false
      } else {
        data.show = true
      }
    }
    // 点击tab栏切换
    const changeQH = async (obj) => {
      console.log('传递过来的值tab', obj)
      let { index, id } = obj
      data.id = id
      data.tabactive = index
      getJXList(id)
      getZHIbOList(id)
      // 渲染尾页数据
      const resall = await getShouYeListApi(store.arrListt[0].id)
      console.log('所有的数据页面resall', resall)
      data.zhoboList = resall
      const res3 = await getBannerApi(id)
      console.log('banner', res3)
      data.lunboList = res3
    }
    // 直播数据
    const getZHIbOList = async (id) => {
      const resall = await getShouYeListApi(id)
      console.log('所有的数据页面直播', resall)
      data.zhoboList = resall
      data.course_list = resall.course_list
    }
    // 精选数据
    const getJXList = async (id) => {
      const resall = await getShouYeJXuanApi(id)
      console.log('所有的数据页面精选', resall, id)
      data.jxlist = resall
    }
    // 轮播图
    const getLunboTuu = async (id) => {
      const res3 = await getBannerApi(id)
      console.log('banner', res3)
      data.lunboList = res3
    }
    // 点击跳转到详情页面
    const goxqing = (id) => {
      router.push(`/xq?basis_id=${id}`)
    }
    // 点击tab栏显示
    const showXs = () => {
      data.show = true
      data.activeIndex = 0
      data.zaicitan = true
    }
    // 存本地的数据
    if (store.arrListt.length > 0) {
      console.log('所有res2', store.arrListt[0].id)
      getShouYeApi(store.arrListt[0].id).then((res2) => {
        console.log('所有的数据0', res2)
        data.allListhq = [{ title: '精选', id: store.arrListt[0].id }, ...res2]
      })
      getBannerApi(data.id).then((res3) => {
        console.log('banner', res3)
        data.lunboList = res3
      })
      getJXList(data.id)
      getZHIbOList(data.id)
    }
    // 渲染剩余时间
    const geiSyTimer = async () => {
      const res4 = await getBannerTimerApi()
      console.log('渲染剩余时间', res4)
      data.SYTimer = res4
    }
    geiSyTimer()
    // 查看更多
    const goxq = () => {
      let Uid = store.arrListt[0].id || data.id
      router.push(`/zhiBoXq?id=${Uid}`)
    }
    // 弹框再次显示
    const taxs = () => {
      data.show = false
      data.zaicitan = false
    }
    return {
      ...toRefs(data),
      onClickLeft,
      chuanzhi,
      ok,
      close,
      changeQH,
      showXs,
      store,
      goxq,
      taxs,
      goxqing
    }
  }
}
</script>

<style lang="scss" scoped>
.home {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  .van-popup {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 25px;
    text-align: center;
    .onetou {
      width: 100%;
      display: flex;
      padding: 0 30px;
      .title {
        margin-top: 40px;
        height: 60px;
        text-align: center;
        line-height: 60px;
        font-size: 19px;
        margin-bottom: 25px;
        margin-left: 160px;
      }
    }
    .item {
      width: 80%;
      height: 100px;
      text-align: center;
      border-radius: 100px;
      background-color: #f1f1f1;
      margin-left: 80px;
      padding-top: 20px;
      margin-bottom: 10px;
      .itemb {
        font-size: 12px;
      }
    }
    .act {
      width: 80%;
      height: 100px;
      text-align: center;
      border-radius: 100px;
      background-color: orangered;
      margin-left: 80px;
      padding-top: 20px;
      margin-bottom: 10px;
      color: #fff;
      .itemb {
        font-size: 12px;
      }
    }
    .wan {
      position: absolute;
      top: 18px;
      right: 30px;
      color: #fff;
      height: 60px;
      background-color: orangered;
      width: 120px;
      border-radius: 60px;
      text-align: center;
      line-height: 60px;
      z-index: 999;
    }
  }
  .bigbox {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 10px 20px;
    .tou {
      width: 100%;
      height: 120px;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 19px;
      font-weight: 700;
      color: #424963;
      .img {
        width: 60px;
        height: 60px;
        margin-left: 35px;
      }
    }
    .tab {
      width: 100%;
      height: 60px;
      box-sizing: border-box;
      display: flex;
      justify-content: space-around;
      color: #666;
    }
    .tabact {
      color: orangered;
      border-bottom: 5px solid orangered;
    }
    .lunbo {
      width: 100%;
      // height: 250px;
      box-sizing: border-box;
      margin-bottom: 60px;
      margin-top: 15px;
      .lunimg {
        width: 100%;
        height: 250px;
        border-radius: 20px;
      }
    }
    .timer {
      width: 100%;
      // height: 120px;
      box-sizing: border-box;
      margin-top: 15px;
      .timerimg {
        width: 80px;
        height: 50px;
        margin-left: 300px;
      }
      .timerzi {
        font-size: 17px;
        color: #424963;
        width: 100%;
        text-align: center;
        margin-top: 6px;
      }
    }
    .nrqu {
      width: 100%;
      // height: 67px;
      box-sizing: border-box;
      display: flex;
      margin-top: -40px;
      .nrquItem {
        // width: 150px;
        // height: 60px;
        border: 1px solid orangered;
        background-color: blanchedalmond;
        color: orangered;
        text-align: center;
        // line-height: 60px;
        margin-right: 25px;
        padding: 10px 20px;
        font-size: 15px;
      }
    }
    .zb {
      width: 100%;
      box-sizing: border-box;
      .zbt {
        width: 100%;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .zbtl {
          font-size: 20px;
          color: #424963;
          font-weight: 700;
        }
        .zbtr {
          font-size: 15px;
          color: #666;
        }
      }
      .zbTouXiang {
        width: 100%;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        margin-top: 15px;
        overflow: hidden;
        .zbTou {
          width: 33.3%;
          box-sizing: border-box;
          background-color: #eee;
          border-radius: 8px;
          padding: 10px 15px;
          margin-right: 10px;
          margin-top: 50px;
          .zbTouimg {
            width: 80px;
            height: 80px;
            border: 1px solid orangered;
            border-radius: 50%;
            margin-top: -50px;
            margin-left: 60px;
          }
          .zbTouTitle {
            font-size: 13px;
            display: -webkit-box;
            overflow: hidden;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            text-align: center;
            height: 90px;
          }
          .zbTouJq {
            width: 150px;
            height: 40px;
            background-color: orangered;
            color: #fff;
            border-radius: 40px;
            text-align: center;
            line-height: 40px;
            margin-left: 30px;
            margin-top: 10px;
            font-size: 12px;
            margin-bottom: 15px;
          }
          .zbTouYBM {
            color: orangered;
            font-size: 12px;
            text-align: center;
          }
        }
      }
    }
    .jx {
      width: 100%;
      box-sizing: border-box;
      margin-top: 25px;
      .jxt {
        font-size: 20px;
        color: #424963;
        font-weight: 700;
        margin-bottom: 20px;
      }
      .all {
        width: 100%;
        box-sizing: border-box;
        padding: 20px 0;
        .list {
          width: 100%;
          box-sizing: border-box;
          margin-bottom: 18px;
          padding-bottom: 20px;
          padding-top: 8px;
          box-shadow: 0 0 2px #ccc;
          .t1 {
            width: 20%;
            background-color: orangered;
            color: #fff;
            padding: 2px 15px;
            text-align: center;
            font-size: 12px;
            margin-left: 5px;
            border-top-left-radius: 20px;
            border-bottom-right-radius: 20px;
          }
          .t2,
          .t3,
          .t4,
          .t5 {
            margin-top: 25px;
            padding: 0 15px;
          }
          .t4 {
            width: 100%;
            box-sizing: border-box;
            display: flex;
            .tu {
              width: 33.3%;
              display: flex;
              .img {
                width: 60px;
                height: 60px;
                border-radius: 50%;
                margin-right: 25px;
              }
            }
          }
          .t5 {
            width: 100%;
            box-sizing: border-box;
            .dis {
              width: 100%;
              box-sizing: border-box;
              display: flex;
              justify-content: space-between;
            }
          }
        }
      }
    }
  }
}
</style>
